<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" http-equiv="Content-Type">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端监控</title>
    <!-- 引入 layui.css -->
    <link href="//unpkg.com/layui@2.7.6/dist/css/layui.css" rel="stylesheet">
    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.7.6/dist/layui.js"></script>
</head>
<body>
    <div id="container">
        <!-- <div class="content" style="background-color: rgb(0, 255, 213); width: 500px; height: 500px;word-wrap: break-word;"> -->
        <div class="content">
            <input type="button" value="抛出js异常" onclick="errorClick()" class="layui-btn layui-btn-radius layui-btn-normal">
            <input type="button" value="抛出promise异常" onclick="promiseClick()" class="layui-btn layui-btn-radius layui-btn-normal">
            <input id="successBtn" type="button" value="api成功" onclick="sendSuccess()" class="layui-btn layui-btn-radius layui-btn-normal">
            <input id="failBtn" type="button" value="api失败" onclick="sendFail()" class="layui-btn layui-btn-radius layui-btn-normal">
        </div>
    </div>
        <script>
            function errorClick() {
                window.someVar.error = 'error';
                // let a = 7;
                // let b = 0;
                // let c = a / b;
            }
            function promiseClick() {
               new Promise(function(resolve, reject) {
                    window.someVar.error = 'error';
                    // let a = 7;
                    // let b = 0;
                    // let c = a / b;

                });
            }
            function sendSuccess() {
                let xhr = new XMLHttpRequest();
                xhr.open('GET', '/success', true);
                xhr.responseType = 'json';
                xhr.onload = function() {
                    console.log(xhr.response);
                };
                xhr.send();
            }
            function sendFail() {
                let xhr = new XMLHttpRequest();
                xhr.open('POST', '/fail', true);
                xhr.responseType = 'json';
                xhr.onload = function() {
                    console.log(xhr.response);
                };
                xhr.onerror = function() {
                    console.log('error');
                };
                xhr.send("666");
            }
        </script>
        <img src="resourceError.jpg"></img>
        <style>
            .content {
                /* 距离边界 100px*/
                margin: 100px;
                /*距离左边20% */
                left: 20%;
            }
        </style>
</body>
</html>